import React, { Component } from "react";
// 导入scss
// import "./index.scss";
import style from "./index.module.css";

import NavHeader from "../../components/NavHeader";
export default class Map extends Component {
  componentDidMount() {
    // 获取本地的城市

    const { label } = JSON.parse(localStorage.getItem("hkzf-current-city"));
    //   创建地图实例
    var map = new window.BMap.Map("container");

    var myGeo = new window.BMap.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      function (point) {
        if (point) {
          console.log(point);
          map.centerAndZoom(point, 11);
          map.addOverlay(new window.BMap.Marker(point));
        }
      },
      label
    );
  }
  render() {
    return (
      // 使用 module.css样式
      <div className={style.map}>
        {/* 头部组件 */}
        <NavHeader>地图找房</NavHeader>
        {/* 地图容器 */}
        <div id="container"></div>
      </div>
    );
  }
}
